<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="styles.css">
	<style>
		body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h1, h2 {
    color: #333;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tr:hover {
    background-color: #e9e9e9;
}

img {
    height: 100px;
    width: 100px;
    object-fit: cover;
}

/* 表单样式 */
form {
    margin-top: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
	</style>
</head>
<body>
    <div id="app">
        <h1>商品管理</h1>
        <table>
            <thead>
                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品图片</th>
                    <th>商品库存</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, i) in items" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td><img :src="item.imgSrc" alt="商品图片" /></td>
                    <td>{{ item.num }}</td>
                    <td><button @click="del(i)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <h2>添加商品</h2>
        <form @submit.prevent="add">
            <label for="name">商品名称:</label>
            <input type="text" v-model="name" id="name" required /><br/>
            <label for="price">商品价格:</label>
            <input type="number" v-model="price" id="price" required /><br/>
            <label for="imgSrc">图片地址:</label>
            <input type="text" v-model="imgSrc" id="imgSrc" required /><br/>
            <label for="num">商品库存:</label>
            <input type="number" v-model="num" id="num" required /><br/>
            <button type="submit">添加</button>
        </form>
    </div>
    
    <script>
        var app = Vue.createApp({
            data() {
                return {
                    name: '',
                    price: '',
                    imgSrc: '',
                    num: '',
                    items: [
                        {
                            id: 1,
                            name: "iPhone 14",
                            price: 8888,
                            imgSrc: "./img/iphone14.jpg",
                            num: 3
                        },
                        {
                            id: 2,
                            name: "华为 Mate 6",
                            price: 8888,
                            imgSrc: "./img/mate40.jpg",
                            num: 3
                        }
                    ]
                }
            },
            methods: {
                add() {
                    this.items.push({
                        id: this.items.length + 1,
                        name: this.name,
                        price: this.price,
                        imgSrc: this.imgSrc,
                        num: this.num
                    });
                    this.name = '';
                    this.price = '';
                    this.imgSrc = '';
                    this.num = '';
                },
                del(i) {
                    this.items.splice(i, 1);
                }
            }
        }).mount("#app");
    </script>
</body>
</html>